<template>
  <view class="change-pwd-page">
    <!-- 密码修改表单 -->
    <view class="pwd-form">
      <view class="form-item">
        <uni-icons type="locked" size="20" color="#999"></uni-icons>
        <input 
          class="input" 
          v-model="formData.oldPwd" 
          placeholder="请输入原密码" 
          password
        />
      </view>
      
      <view class="form-item">
        <uni-icons type="locked" size="20" color="#999"></uni-icons>
        <input 
          class="input" 
          v-model="formData.newPwd" 
          placeholder="请输入新密码(6-20位字符)" 
          password
        />
      </view>
      
      <view class="form-item">
        <uni-icons type="locked" size="20" color="#999"></uni-icons>
        <input 
          class="input" 
          v-model="formData.confirmPwd" 
          placeholder="请再次输入新密码" 
          password
        />
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-btn" @click="submitChange">
      <text>确认修改</text>
    </view>
    
    <!-- 密码强度提示 -->
    <view class="pwd-tips">
      <text>密码强度提示：</text>
      <text>1. 长度6-20位字符</text>
      <text>2. 建议包含字母、数字和特殊符号</text>
      <text>3. 不要使用过于简单的密码</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        oldPwd: '',
        newPwd: '',
        confirmPwd: ''
      }
    }
  },
  methods: {
    validateForm() {
      if (!this.formData.oldPwd) {
        uni.showToast({
          title: '请输入原密码',
          icon: 'none'
        })
        return false
      }
      
      if (!this.formData.newPwd || this.formData.newPwd.length < 6) {
        uni.showToast({
          title: '新密码长度需6-20位',
          icon: 'none'
        })
        return false
      }
      
      if (this.formData.newPwd !== this.formData.confirmPwd) {
        uni.showToast({
          title: '两次输入密码不一致',
          icon: 'none'
        })
        return false
      }
      
      return true
    },
    submitChange() {
      if (!this.validateForm()) return
      
      uni.showLoading({
        title: '修改中...'
      })
      
      // 模拟API请求
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '密码修改成功',
          icon: 'success'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }, 1000)
    }
  }
}
</script>

<style>
.change-pwd-page {
  height: 100vh;
  background-color: #f7f7f7;
  padding: 40rpx;
}
.pwd-form {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 0 30rpx;
  margin-bottom: 40rpx;
}
.form-item {
  display: flex;
  align-items: center;
  height: 100rpx;
  border-bottom: 1rpx solid #f1f1f1;
}
.form-item:last-child {
  border-bottom: none;
}
.input {
  flex: 1;
  margin-left: 20rpx;
  font-size: 28rpx;
  color: #333;
}
.submit-btn {
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background-color: #ff2d4a;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  margin-bottom: 40rpx;
}
.pwd-tips {
  font-size: 24rpx;
  color: #999;
  line-height: 1.8;
}
</style>